import React from 'react'
import { Input, List } from 'antd'
import store from '@/store/index'

class Demo2 extends React.Component {

  constructor(props) {
    super(props)
    this.unsubscribe = store.subscribe(this.storeChange)
  }

  state = Object.assign({
  }, store.getState())

  componentDidMount() {
    this.state.Demo1 && this.state.Demo1.fn()
  }

  // 生命周期函数-组件销毁时执行
  componentWillUnmount() {
    this.unsubscribe && this.unsubscribe()
  }

  storeChange = () => {
    this.setState(store.getState())
  }

  render() {
    let { list } = this.state
    console.log(list)
    return (
      <div className="_demo">
        <div style={{ marginBottom: 16 }}>
          <Input addonAfter="元" />
          <Input.Group compact>
            <Input style={{ width: 100, textAlign: 'center' }} addonAfter="元" placeholder="Minimum" />
            <Input
              className="site-input-split"
              style={{
                width: 30,
                borderLeft: 0,
                borderRight: 0,
                pointerEvents: 'none',
              }}
              placeholder="~"
              disabled
            />
            <Input
              className="site-input-right"
              style={{
                width: 100,
                textAlign: 'center',
              }}
              addonAfter="元"
              placeholder="Maximum"
            />
          </Input.Group>
          <List bordered>
            {
              list.map((item, index) => {
                return (
                  <List.Item key={ index }>{ item }</List.Item>
                )
              })
            }
          </List>
        </div>
      </div>
    )
  }

}

export default Demo2